<template>
  <CommonCard title="今日销售额"
              :value="salesToday |moneyFormat"
              class="today-sales">
    <!-- 插槽 -->
    <template v-slot:chart class="chart">
      <div class="compare-warp">
        <div class="compare">
          <div>日同比</div>
          <div class="number">{{salesGrowthLastDay}}%</div>
          <div :class="salesGrowthLastDay > 0 ?  'increment' : 'decrement'"></div>
        </div>
        <div class="compare">
          <div>月同比</div>
          <div class="number">{{salesGrowthLastMonth}}%</div>
          <div :class="salesGrowthLastMonth > 0 ? 'increment' : 'decrement'"></div>
        </div>
      </div>
    </template>
    <!-- 插槽的简写方式 -->
    <template #bottom>
      <div>
        <span>昨日销售额</span>
        <span class="number">{{salesLastDay|moneyFormat}}</span>
      </div>
    </template>
  </CommonCard>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'TodaySales',
  computed: {
    //    "salesToday": 30346799,
    //   "salesLastDay":   36000000,
    //   "salesGrowthLastDay": -19.16,
    //   "salesGrowthLastMonth": 56.67,
    ...mapState({
      salesToday: (state) => state.data.reportData.salesToday,
      salesLastDay: (state) => state.data.reportData.salesLastDay,
      salesGrowthLastDay: (state) => state.data.reportData.salesGrowthLastDay,
      salesGrowthLastMonth: (state) => state.data.reportData.salesGrowthLastMonth,
    }),
  },
}
</script>

<style lang="scss">
.today-sales {
  .compare-warp {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    color: #666;
    .compare {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
}
</style>